﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="color,layer"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
        .color-btn {
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 26px;
            display: inline-block;
            border: 1px solid #ccc;

        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />
    
<h3 class="spliter">4、外部事件</h3>
<div class="row">
    <span class="color-btn" id="colorBtn41"><i class="ra ra-single-angle-down"></i></span>
    <button class="rayui-btn" id="btn41">显示</button>
    <button class="rayui-btn btn-danger" id="btn42">隐藏</button>
    <button class="rayui-btn btn-warning" id="btn43">绑定事件</button>
    <button class="rayui-btn btn-success" id="btn44">解绑事件</button>
    <button class="rayui-btn btn-primary" id="btn45">设置颜色纯蓝</button>
</div>

    <h3 class="spliter">3、自定义尺寸,尺寸不能太小否则按钮容易换行</h3>
    <div class="row">
        <div class="row-inline" id="colorContainer31"></div>
        <div class="row-inline" id="colorContainer32"></div>
        <div class="row-inline" id="colorContainer33"></div>
    </div>

    <h3 class="spliter">2、事件</h3>
    <div class="row">
        <span>占位置，用来测试定位</span>
        <span>占位置，用来测试定位</span>
        <span class="color-btn" id="colorBtn21" style="background: #35e3a6"><i class="ra ra-single-angle-down"></i></span>
        <span class="color-btn" id="colorBtn22" style="background: #95cc6e"><i class="ra ra-single-angle-down"></i></span>
        <span class="color-btn" id="colorBtn23" style="background: rgba(227,216,4,1)"><i class="ra ra-single-angle-down"></i></span>
    </div>

    <h3 class="spliter">1、container容器内显示</h3>
    <div class="row">
        <div class="row-inline" id="colorContainer1"></div>
        <div class="row-inline" id="colorContainer2"></div>
        <div class="row-inline" id="colorContainer3"></div>
    </div>

    <script>
        rayui.ready(function () {

            var color = rayui.color,
                corUtils = rayui.colorutils,//可以直接使用
                layer = rayui.layer;

            
            //外部控制
            (function () {

                var ins = color.render({ elem: "#colorBtn41", btnClearText: "Clear", btnOkText: "OK" });

                $("#btn41").click(function() {
                    ins.show();
                });

                $("#btn42").click(function () {
                    ins.hide();
                });

                $("#btn43").click(function () {
                    ins.on("changing", function (color) {
                        $("#colorBtn41").css("background", color);
                        layer.msg(" "+color, { timeout: 500, shade: false });
                    });
                    layer.msg("绑定事件成功，改变颜色试试");
                });

                $("#btn44").click(function () {
                    ins.off("changing");
                    layer.msg("解绑事件成功，改变颜色再试试");
                });

                $("#btn45").click(function () {
                    ins.setColor("#00f");
                });

            })();


            //自定义尺寸
            (function () {

                color.render({
                    container: "#colorContainer31",
                    width: 280
                });

                color.render({
                    container: "#colorContainer32",
                    color: "#00f",
                    alpha: true,
                    width: 300,
                    btnClear: false
                });

                color.render({
                    container: "#colorContainer33",
                    alpha: true,
                    width: 340,
                    format: "rgba",
                    color: "hsba(0,0,0)",
                    preColors: true
                });

            })();

            //事件
            (function () {

                color.render({
                    elem: "#colorBtn21",
                    color:"#35e3a6",
                    onChanging: function(color) {
                        $("#colorBtn21").css("background", color);
                    }
                });

                color.render({
                    elem: "#colorBtn22",
                    color: "#95cc6e",
                    alpha: true,
                    btnClear: false,
                    onChanging: function (color) {
                        $("#colorBtn22").css("background", color);
                    }
                });

                color.render({
                    elem: "#colorBtn23",
                    alpha: true,
                    format: "rgba",
                    color: "rgba(227,216,4,1)",
                    preColors: true,
                    onChanging: function (color) {
                        $("#colorBtn23").css("background", color);
                    }
                });

            })();
            
            //容器
            (function () {

                color.render({
                    container: "#colorContainer1",
                });

                color.render({
                    container: "#colorContainer2",
                    color: "#00f",
                    alpha: true,
                    btnClear: false
                });

                color.render({
                    container: "#colorContainer3",
                    alpha: true,
                    format: "rgba",
                    color: "hsba(0,0,0)",
                    preColors: true
                });

            })();

        });

    </script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：
var ins = color.render({elem: "#colorBtn32"});

option属性：
elem://dom对象
container://容器，和elem选其一
event: "click", //触发方式
width: 宽度，选择框高度自动计算，默认260px
format: 返回格式，可选hex、hexa、rgb、rgba、hsb、hsba，默认hex
color: //默认颜色，默认值'#f00'
alpha: //是否开启透明，默认false，不开启
preColors: //预先设置的颜色，bool类型和颜色，数组在选择器下方显示，不建议设置太多，默认false，为true时系统默认了8种颜色：
                    ["#f00", "#FFA300", "#129A00", "#108B81",  "#1768E9", "#8116E2", "#D510C0", "#3E8C55"],<div class="color-predef" data-color="#f00" style="background:#f00"></div><div class="color-predef" data-color="#FFA300" style="background:#FFA300"></div><div class="color-predef" data-color="#129A00" style="background:#129A00"></div><div class="color-predef" data-color="#108B81" style="background:#108B81"></div><div class="color-predef" data-color="#1768E9" style="background:#1768E9"></div><div class="color-predef" data-color="#8116E2" style="background:#8116E2"></div><div class="color-predef" data-color="#D510C0" style="background:#D510C0"></div><div class="color-predef" data-color="#3E8C55" style="background:#3E8C55"></div>
btnClear: //是否显示清除按钮，默认true显示
btnClearText: "清除",
btnOkText: "确定"

属性事件：
onChanging: 变化中，任一改变都会触发
onChanged: 已经改变，点击确定时触发



ins方法：
on(event, callback): 绑定事件，event支持changing、changed事件，同属性事件onChanging、onChanged一致
off(event):事件解绑
show():显示
hide():隐藏



</pre>

</body>
</html>